<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>折扇效果</title>
	</head>
	<style type="text/css">
		.box{
			width: 400px;
			height: 400px;
			border-bottom: 4px solid#000000;
			margin: 70px auto;
		}
		ul{
			list-style: none;
			position: relative;
			top: 160px;
			left: 120px;
		}
		ul>li{
			width: 75px;
			height: 200px;
			background-color: #FF0000;
			box-shadow: 3px 1px 5px #000;
			border-radius: 12px;
			position: absolute;
				transition: all 1s linear;
				opacity: .6;
		}
		ul>li:nth-of-type(2){
			background-color: #00FFFF;
		}
		ul>li:nth-of-type(3){
			background-color: #005500;
		}
		ul>li:nth-of-type(4){
			background-color: #aa5500;
		}
		ul>li:nth-of-type(5){
			background-color: #aaaa00;
		}
		ul>li:nth-of-type(6){
			background-color: #00ff00;
		}
		ul>li:nth-of-type(7){
			background-color: #00007f;
		}
		ul>li:nth-of-type(8){
			background-color: #00557f;
		}
		ul>li:nth-of-type(9){
			background-color: #ff5500;
		}
		ul>li:nth-of-type(10){
			background-color: #aaffff;
		}
		ul>li:nth-of-type(11){
			background-color: #ff00ff;
		}
		ul>li:nth-of-type(12){
			background-color: #55007f;
		}
		ul>li:nth-of-type(13){
			background-color: #4d497f;
		}
		ul:hover li:nth-of-type(2){
			transform: rotate(15deg);
			transform-origin: bottom center;
		}
		ul:hover li:nth-of-type(3){
			transform: rotate(30deg);
			transform-origin: bottom center;
		}
		ul:hover li:nth-of-type(4){
			transform: rotate(45deg);
			transform-origin: bottom center;
		}
		ul:hover li:nth-of-type(5){
			transform: rotate(60deg);
			transform-origin: bottom center;
		}
		ul:hover li:nth-of-type(6){
			transform: rotate(75deg);
			transform-origin: bottom center;
		}
		ul:hover li:nth-of-type(7){
			transform: rotate(90deg);
			transform-origin: bottom center;
		}
		ul:hover li:nth-of-type(8){
			transform: rotate(-15deg);
			transform-origin: bottom center;
		}
		
		ul:hover li:nth-of-type(9){
			transform: rotate(-30deg);
			transform-origin: bottom center;
		}
		ul:hover li:nth-of-type(10){
			transform: rotate(-45deg);
			transform-origin: bottom center;
		}ul:hover li:nth-of-type(11){
			transform: rotate(-60deg);
			transform-origin: bottom center;
		}
		ul:hover li:nth-of-type(12){
			transform: rotate(-75deg);
			transform-origin: bottom center;
		}
		ul:hover li:nth-of-type(13){
			transform: rotate(-90deg);
			transform-origin: bottom center;
		}
		
	</style>
	<body>
		<div class="box">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>10</li>
				<li>11</li>
				<li>12</li>
				<li>13</li>
				
			</ul>
		</div>
	</body>
</html>
